<!--
 * @Author: 凉月 1931226988@qq.com
 * @Date: 2023-08-21 20:46:26
 * @LastEditors: 凉月 1931226988@qq.com
 * @LastEditTime: 2023-08-21 21:27:25
 * @FilePath: \WanYi\src\components\v-merit-item\v-merit-item.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="v-merit-item">
    <image
      class="img"
      :src="data.look.picUrl"
      mode="widthFix"
    />
    <div class="content">
      <div class="title">{{ data.look.title }}</div>
      <div class="bottom">
        <div class="left bottom_item">
          <image
            class="bottom_item_img"
            :src="data.look.avatar"
            mode="widthFix"
          />
          <div class="bottom_item_text"> {{ data.look.nickname }} </div>
        </div>
        <div class="right bottom_item">
          <image
            class="bottom_item_img"
            src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
            mode="widthFix"
          />
          <div class="bottom_item_text">{{ data.look.readCount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['data'])
</script>

<style scoped lang="less">
.v-merit-item {
    float: left;
  width: 46vw;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 20rpx;
  .img {
    width: 100%;
  }
  .content {
    background-color: #fff;
    padding: 20rpx 10rpx;
    .title {
        margin: 20rpx 0;
        font-size: 28rpx;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .bottom_item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        .bottom_item_img {
            margin-right: 10rpx;
            border-radius: 50%;
            width: 54rpx;
        }
      }
    }
  }
}
</style>
